<ot-view>

    <div class="panel panel-default">
        <div class="panel-body">
            <form name="permissionForm" class="form-inline" role="form" ng-submit="saveGlobalPermission()">
                <!-- Permission target -->
                <div class="form-group">
                    <input type="text" class="form-control col-xs-6"
                           placeholder="Permission target"
                           required="required"
                           ng-model="form.permissionTarget"
                           typeahead="target as formatPermissionTarget(target) for target in loadPermissionTargets($viewValue)"
                           typeahead-editable="false"
                            />
                </div>
                <!-- List of global roles -->
                <div class="form-group">
                    <select ng-model="form.role" class="form-control"
                            required="required"
                            ng-options="role.name for role in globalRoles.resources">
                        <option value="" disabled="disabled">Select a role...</option>
                    </select>
                </div>
                <!-- Creation -->
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" ng-disabled="!form.permissionTarget || !form.role">Submit</button>
                </div>
            </form>
            <span class="ot-description">{{form.role.description}}</span>
        </div>
        <table class="table table-hover" ng-if="globalPermissions.resources">
            <thead>
            <tr>
                <th>Name</th>
                <th>Role</th>
                <th>&nbsp;</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="globalPermission in globalPermissions.resources">
                <td>
                    <img src="assets/permission-target-{{globalPermission.target.type}}.png"/>
                    <b>{{globalPermission.target.name}}</b>
                    <span class="ot-description" ng-if="globalPermission.target.description">
                        - {{globalPermission.target.description}}
                    </span>
                </td>
                <td title="{{globalPermission.role.description}}">
                    {{globalPermission.role.name}}
                </td>
                <td>
                    <span class="ot-command ot-command-delete"
                          title="Remove the {{globalPermission.role.name}} role from {{globalPermission.target.name}}"
                          ng-click="removeGlobalPermission(globalPermission)"
                            ></span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</ot-view>